<template>
    <div style="width: 100%;height: 729px;">
      <div style="width: 100%;height: 110px;">
        <el-row style="width: 100%;height: 100%;">
          <el-col style="width: 40%;height: 100%;">
            <el-image :src="require('@/assets/友友在线聊天室-登录.png')" style="width: 80%;height: 80%;left: 100px;top: 10px;"></el-image>
          </el-col>
        </el-row>
      </div>
      <div style="width: 100%;height: 500px;background-color: rgb(92,225,230)" >
        <el-row style="width: 100%;height: 100%;">
          <el-col style="width:60%;height: 100%;">
            <el-image :src="require('../../assets/QQ截图20231220134340.png')" style="width: 90%;height: 90%;position: relative;left: 280px;top: 20px;"></el-image>
          </el-col>
          <el-col style="width: 40%;height: 100%;">
            <el-card style="width: 70%;height: 300px;position: relative;top: 18%;left: 5%; border-radius: 2%" shadow="always">
              <el-row style="width: 100%;height: 60px;">
                <el-form :model="logForm" :rules="rules" ref="logForm" label-width="90px" style="margin-top: 40px;">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="logForm.username" auto-complete="off" style="width: 220px;" @focus="inputUsername"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input v-model="logForm.password" auto-complete="off" type="password" style="width: 220px;" @focus="inputPwd"></el-input>
                  </el-form-item>
                </el-form>
                <el-col style="width: 100%;height: 100%;margin-top: 20px;font-family: 微软雅黑;font-size: 22px;margin-left: 22px;">
                  <el-button type="primary" style="position: relative;left: 17%;bottom:25px;font-size: 16px;width: 220px;" @click="loginData('logForm')"> 登录 </el-button>
                  <!--                <el-button type="primary" style="position: relative;left: 22%;font-size: 16px;width: 80px;" @click="toRegPage">注册</el-button>-->
                </el-col>
              </el-row>>
              <el-row style="width: 100%;height: 50px;position: relative;top: 130px;">
                <el-link :underline="false" style="font-family: 微软雅黑;font-size: 10px;position: relative;right: 4px;" @click="toRegPage">点击注册</el-link>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

</template>

<script>
// import this.$http from 'this.$http'
import qs from 'qs'
import { Loading } from 'element-ui';
export default {
  name: "LoginPage",
  methods:{
    inputUsername(){
      this.isOpenEye=true
    },
    inputPwd(){
      this.isOpenEye=false
    },
    toForGetPwd(){
      let ld=Loading.service({
        lock:true,
        background:'rgba(255,255,255,0.5)',
      })
      setTimeout(() => {
        ld.close()
        this.$router.replace({
          path:'/findpassword'
        })
      }, 500);
    },
    toTextLogin(){
      let ld=Loading.service({
        lock:true,
        background:'rgba(255,255,255,0.5)',
      })
      setTimeout(() => {
        ld.close()
        this.$router.replace({
          path:'/logintext'
        })
      }, 500);
    },
    toRegPage(){
      let ld=Loading.service({
        lock:true,
        background:'rgba(255,255,255,0.5)',
      })
      setTimeout(() => {
        ld.close()
        this.$router.replace({
          path:'/register'
        })
      }, 500);
    },
    loginData(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/user/login', qs.stringify({
            username: this.logForm.username,
            password: this.logForm.password,
          }), {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then(response => {
                //登录成功
                if(response.data.success){
                  let ld=Loading.service({
                    lock:true,
                    text:"正在登陆中",
                    background:'rgba(255,255,255,0.5)',
                  })
                  setTimeout(() => {
                    ld.close()
                    localStorage.setItem("username",JSON.stringify(response.data.username))
                    localStorage.setItem("isAdmin",JSON.stringify(response.data.admin))
                    localStorage.setItem("token",JSON.stringify(response.data.token))
                    //console.log(typeof JSON.stringify(response.data.admin))
                    //console.log(typeof response.data.admin)
                    //根据身份跳转对应端
                    if(response.data.admin){
                      this.$router.replace({
                        path:'/admin/homepage'
                      })
                    }else {
                      this.$router.replace({
                        path:'/chat'
                      })
                    }
                    this.$message.success('登录成功，欢迎您  '+response.data.username);
                  }, 1800);
                }else {
                  let ld=Loading.service({
                    lock:true,
                    text:"正在登陆中",
                    background:'rgba(255,255,255,0.5)',
                  })
                  setTimeout(() => {
                    ld.close()
                    if(response.data.infor=="not register"){
                      this.$message.error('登录失败，该账号不存在，请先注册！');
                    }
                    if(response.data.infor=="password error"){
                      this.$message.error('登录失败，密码错误，请重试！');
                    }
                  }, 1200);
                }
                console.log(response)
          }).catch(error => {
                alert("no")
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  data(){
    var validateUserName = (rule, value, callback) => {
      if(value=='' || value==null){
        callback(new Error('请输入用户名'))
      }
      callback()
    };
    var validatePassword=(rule, value, callback) => {
      if(value=='' || value==null){
        callback(new Error('请输入密码'))
      }
      callback()
    };
    var validateSpace = (rule, value, callback) => {
      let spaceRegex=/\s/
      //如果有空格，则执行回调函数
      if(spaceRegex.test(value)){
        callback(new Error('存在空格！'));
      }
      callback();
    };
    return {
      isOpenEye:true,
      logForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { validator:validateUserName,trigger: 'blur' },
          { validator:validateSpace, message: '用户名存在空格！', trigger: 'blur' }
        ],
        password: [
          { validator:validatePassword,trigger: 'blur' },
          { validator:validateSpace, message: '密码存在空格！', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style scoped>
.el-form-item__label {
  font-size: 20px; /* 修改字体大小 */
}
.el-dropdown-link{
  cursor: pointer;
}
.back-gound-img{
  background-image:image("../../assets/backgound.png");
}
</style>

